<template>
	<view>

		<view style="display: flex;" class="bg-white padding-sm margin-sm radius">
			<view style="flex:1;text-align: center;border: 1px solid #ccc;border-radius: 5px" @click="handleClick(-1)"
				class=" juzhong radius ">前一天
			</view>
			<view style="flex:1;text-align: center;">
				<view class="font-13">{{dateToWeek(queryForm.week_EQ)}}</view>
				<view class="font-11">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="queryForm.week_EQ" size="mini"
						@change="handleClick(0)" />
				</view>
			</view>
			<view style="flex:1;text-align: center;border: 1px solid #ccc;border-radius: 5px" @click="handleClick(1)"
				class=" juzhong radius">后一天</view>
		</view>


		<view v-if="list.length==0" class="margin-top-sm">
			<blues-empty img="msg" text="暂无数据">

			</blues-empty>
		</view>
		<view class="content">
			<view v-for="item in list">

				<view v-for="aaa in item.sysOfflineTimetableModelList">

					<view class="bg-white padding-sm margin-sm radius" v-if="aaa.list.length>0">
						<view style="text-align: center;">
							{{ aaa.startTime }} &nbsp;&nbsp;到&nbsp;&nbsp;{{ aaa.outTime }}
						</view>
						<uni-row :gutter="20">

							<template v-for="bbb in aaa.list">
								<uni-col :span="12" class="margin-top-sm">
									<view :style="{'background':bbb.number>0? '#f7fff5': '#fff3f3'}" body-style=""
										shadow="always" class="radius shadow-warp">
										<center><b style="font-size: 28rpx ;">
												{{ $getDictNameByValue('offline_class_name', bbb.offlineClassName) }}</b>
										</center>
										<hr style="border-color: rgba(255,255,255,0.44);margin: 4px 10px 4px 10px;">
										<view style="margin: 0px 0px 0px 10px;">
											主讲：{{ formatterUserName(bbb.principalTeacher) }}<br>
											容量：{{ bbb.capacity + "/" + bbb.number }}<br>
											教室：{{ sysClassroomId(bbb.sysClassroomId) }}<br>
											授课类型：{{ $getDictNameByValue('offline_curriculum_type', bbb.offlineCurriculumType) }}<br>
										</view>
										<hr style="border-color: rgba(255,255,255,0.44);margin: 4px 10px 4px 10px;">
										<view style="margin: 5px;display: flex;padding-bottom: 10rpx;">

											<view v-if="$perms('system_offlineclass_manage_student')"
												style="padding: 10rpx 20rpx;" @click="manage_student(bbb)"
												class=" bg-blue radius margin-left-xs">
												<vab-icon class="vab-icon" :icon="['fas', 'user-friends']"
													:style="{color:'#fff'}"></vab-icon>
											</view>
											<view v-if="$perms('system_offlineclass_update')"
												class=" bg-yellow radius margin-left-xs" style="padding: 10rpx 20rpx;"
												@click="handleUpdate(bbb)">
												<vab-icon class="vab-icon" :icon="['fas', 'user-cog']"
													:style="{color:'#fff'}"></vab-icon>
											</view>
											<view v-if="$perms('system_offlineclass_update')"
												class=" bg-red radius margin-left-xs" style="padding: 10rpx 20rpx;"
												@click="handleDelete(bbb)">
												<vab-icon class="vab-icon" :icon="['fas', 'trash-alt']"
													:style="{color:'#fff'}"></vab-icon>
											</view>
										</view>
									</view>
								</uni-col>

							</template>
						</uni-row>

					</view>

				</view>
			</view>


			<blues-empty v-if="ok" img="msg" text="今日无课">

			</blues-empty>
		</view>

		<view class="floating-div juzhong bg-blue" @click="addSysOfflineClass">
			<uni-icons type="plusempty" size="30" color="#fff" style="font-weight: bold;"></uni-icons>
		</view>
		<edit ref="edit" @fetchData="fetchData"></edit>

		<manageStudent ref="manageStudent" @refresh="fetchData"></manageStudent>
	</view>
</template>

<script>
	import Edit
	from "@/pages/tenantSet/academicAffairsCenter/offlineClass/edit.vue";
	import ManageStudent from "@/pages/tenantSet/academicAffairsCenter/scheduleTimetable/components/index";

	import {
		doDeleteAll,
		doExportExcel,
		testExpiresNextWeek
	} from "@/api/system/academicAffairsCenter/offlineClass/SysOfflineClassManagementApi";
	import {
		getcommon,
		formatterUserName,
		formattersysClassroomName
	} from "@/utils/common.js";
	import {
		doDelete,
		getListByWeek,
		huoqurongliang,
		zhihuanid
	} from "@/api/system/academicAffairsCenter/offlineTimetable/SysOfflineTimetableManagementApi";
	import {
		formateDate,
		getChineseWeekday,
	} from "@/utils/validate.js";

	export default {
		components: {
			Edit,
			ManageStudent
		},
		data() {
			return {

				list: [{
					sysOfflineTimetableModelList: []
				}],
				listLoading: true,
				layout: "total, prev, pager, next, sizes, jumper",
				total: 0,
				selectRows: "",
				elementLoadingText: "正在加载...",
				moreQueryFlag: false,
				queryForm: {
					principalTeacher_EQ: null,
					week_EQ: formateDate(new Date(), 'yyyy-MM-dd'),
				},
				ok: false,
				dict: {},

			}
		},
		created() {
			this.fetchData();
		},
		mounted() {
			var sdf = getcommon("shijianduan")
			this.dict.offline_class_type = this.$getDictList("offline_class_type");
			this.dict.offline_class_name = this.$getDictList("offline_class_name");
			this.dict.no_yes = this.$getDictList("no_yes");
			this.dict.week = this.$getDictList("week");
			this.dict.offline_class_keshishu = this.$getDictList("offline_class_keshishu");
		},
		methods: {
			dateToWeek(data) {
				return getChineseWeekday(data)
			},
			async zhihuanid(id) {
				let {
					data,
					success,
					msg
				} = await zhihuanid({
					id: id
				});
				if (data.id == '199999') {
					this.$baseMessage("没有对应的课表，无法操作", "error");
				}
				return data.id
			},
			async adfasdf(id) {
				const {
					data
				} = await huoqurongliang({
					id: id
				})
				console.log(data)
				return data
			},

			manage_student(row) {
				if (row.id) {
					this.$refs["manageStudent"].open(row);
				}
			},
			sysClassroomId(cellValue) {
				return formattersysClassroomName(cellValue)

			},
			formatterUserName(cellValue) {

				return formatterUserName(
					cellValue

				)
			},


			handleClick(i) {

				if (i == 1) {
					this.queryForm.week_EQ = this.list[2].startClassDate;
				}

				if (i == -1) {
					this.queryForm.week_EQ = this.list[0].startClassDate;
				}

				if (i == 0) {
					this.queryForm.week_EQ
				}



				this.queryData()
			},
			setSelectRows(val) {
				this.selectRows = val;
			},
			handleInsert(row) {
				this.$refs["edit"].showEdit();
			},
			handleUpdate(row) {
				if (row.id) {
					this.$refs["edit"].open(row);
				}
			},

			addSysOfflineClass() {
				this.$refs["edit"].open({});
			},
			handleDelete(row) {
				let _this = this
				if (row.id) {
					uni.showModal({
						title: '删除班级',
						content: '你确定要删除班级吗',
						success: async function(res) {
							if (res.confirm) {
								const {
									msg
								} = await doDelete({
									id: row.id
								});

								_this.fetchData();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});


				} else {
					if (this.selectRows.length > 0) {


						uni.showModal({
							title: '删除班级',
							content: '你确定要删除选中项吗',
							success: async function(res) {
								if (res.confirm) {
									const {
										msg
									} = await doDeleteAll({
										ids
									});

									_this.fetchData();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						const ids = this.selectRows.map((item) => item.id).join();

					} else {

						return false;
					}
				}
			},
			// 导出excel
			handleExportExcel(el) {
				// 导出按钮防抖处理 默认限制为10秒
				vueButtonClickBan(el, 10);

				// 执行导出
				doExportExcel(this.queryForm);
			},
			// 导入excel
			handleImportExcel() {
				this.$refs["import"].show();
			},


			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.queryForm.pageNo = val;
				this.fetchData();
			},
			moreQuery() {
				this.moreQueryFlag = !this.moreQueryFlag;
			},
			queryData() {
				this.fetchData();
			},


			getweekByint(int) {
				var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				return weekdays[int]
			},
			async fetchData() {
				this.listLoading = true;
				setTimeout(() => {
					this.listLoading = false;
				}, 3000);

				const {
					data
				} = await getListByWeek(this.queryForm);
				this.list = data;

				var data2 = []
				for (const data2Element of getcommon("shijianduan")) {
					data2.push({
						id: data2Element.id,
						startTime: data2Element.startTime,
						outTime: data2Element.outTime,
						list: []
					})
				}


				if (data[1].sysOfflineTimetableModelList == null) {
					this.ok = true
					return
				}

				for (const data2Element of data[1].sysOfflineTimetableModelList) {

					for (const data2ElementElement of data2) {

						if (data2Element.sysTimeSlotId === data2ElementElement.id) {
							data2ElementElement.list.push(data2Element)
							break; // 跳出当前for循环

						}
					}
				}

				this.list[1].sysOfflineTimetableModelList = data2
				this.listLoading = false;
				//按照时间段 分组
				let i = 0
				this.ok = this.list[1].sysOfflineTimetableModelList == null || this.list[1]
					.sysOfflineTimetableModelList
					.length == 0
			},
		},
	}
</script>

<style lang="scss" scoped>
	.floating-div {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f2f2f2;

	}

	/deep/.uni-date__x-input {
		width: auto;
		height: 30rpx;
		padding-left: 5px;
		position: relative;
		flex: 1;
		line-height: 35rpx;
		font-size: 14px;
		overflow: hidden;
	}

	.el-tabs__item {
		list-style: none;
		font-size: 14px;
		font-weight: 500;
		color: #303133;
	}

	/deep/.uni-date-x {
		.icon-calendar {
			display: none;
		}
	}

	/deep/.uni-date-x--border {
		border: none
	}
</style>